<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="../font-awesome-4.7.0/css/font-awesome.min.css"/>
    <title></title>

</head>
<body>
    <table class="layui-table">
        <tr>
            <td>人员编号</td>
            <td id="employee-num">人员编号</td>
            <td>姓名</td>
            <td id="employee-name">姓名</td>
            <td>性别</td>
            <td id="employee-sex">性别</td>
            <td>民族</td>
            <td id="employee-nation">民族</td>
        </tr>
        <tr>
            <td>部门</td>
            <td id="dept-name">部门</td>
            <td>出生日期</td>
            <td id="employee-birthday" colspan="2">出生日期</td>
            <td>最高学历</td>
            <td colspan="2" id="employee-education">最高学历</td>
        </tr>
    </table>
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">教育经历</li>
            <li>工作经历</li>
            <li>证书情况</li>
            <li>家庭成员</li>
            <li>奖励情况</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <table class="layui-table" id="educationinfo">

                </table>
            </div>
            <div class="layui-tab-item">工作经历</div>
            <div class="layui-tab-item">证书情况</div>
            <div class="layui-tab-item">家庭成员</div>
            <div class="layui-tab-item">奖励情况</div>
        </div>
    </div>
</body>
<script src="../layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    (function (){
        layui.table.render({
            elem: '#educationinfo'
            , url: 'http://127.0.0.1:8080/user/selectByPage'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                {type: 'checkbox'}
                , {field: 'userId', title: 'ID', sort: true}
                , {field: 'userName', title: '用户名', width: 150} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , {field: 'userPwd', title: '密码'}
                // , {field: 'userSex', title: '性别'}
                // , {field: 'userAge', title: '年龄', sort: true}
                , {field: 'createTime', title: '创建时间', align: 'center', width: 200} //单元格内容水平居中
                , {field: 'updateTime', title: '更新能时间', align: 'right', width: 200} //单元格内容水平居中
                , {field: 'delStatus', title: '状态', sort: true, align: 'right'}
            ]]
            , page: true
            , limit: 10
            , limits: [3, 5, 10, 15]
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.count, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            }
            , request: {
                pageName: 'pageNum' //页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
        });

        layui.$.ajax({
            url:"http://127.0.0.1:8080/employee/selectByUserId/"+1,
            method:"get",
            success:function (result){
                console.log(result);
                layui.$("#employee-name").text(result.data.employeeName);
                layui.$("#employee-birthday").text(result.data.employeeBirthday);
                layui.$("#employee-sex").text(result.data.employeeSex);
                layui.$("#employee-education").text(result.data.employeeEducation);
                layui.$("#employee-nation").text(result.data.employeeNation);
            }
        });
    })();
</script>
</html>
